<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

  <head th:replace="include/head::head"></head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">

        <div th:replace="/include/sidebar"></div>
        <!-- top navigation -->
        <div th:replace="include/navigation::navigation"></div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">
          <div class="">

            <div class="">
              <div class="col-md-12 col-sm-12  ">
                <div class="x_panel">

                  <div class="x_content">

                    <ul class="nav nav-tabs bar_tabs" id="myTab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">逐个上传</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">批量上传</a>
                      </li>
                    </ul>

                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div class="row">
                          <div class="col-md-12 col-sm-12 ">
                              <div class="x_content">
                                <br />
                                <form id="single-upload" data-parsley-validate class="form-horizontal form-label-left" action="" method="post" onsubmit="return false">

                                  <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="section">所属章节 <span class="required"></span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 ">
                                      <select class="form-control" id="section">
                                        <option class="empty-option">请选择</option>
                                        <option th:each="section,sectionstate:${sections}" th:value="${section.secId}" th:text="${section.secName}"></option>
                                      </select>
                                    </div>
                                  </div>
                                  <div class="item form-group">
                                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="type">试题类型 <span class="required"></span>
                                    </label>
                                    <div class="col-md-6 col-sm-6 ">
                                      <select class="form-control" id="type">
                                        <option  class="empty-option">请选择</option>
                                        <option th:each="type,typestate:${types}" th:value="${type.dicId}" th:text="${type.dicValue}">Choose option</option>
                                      </select>
                                    </div>
                                  </div>
                                  <div class="item form-group">
                                    <label for="level" class="col-form-label col-md-3 col-sm-3 label-align">试题难度</label>
                                    <div class="col-md-6 col-sm-6 ">
                                      <select class="form-control" id="level">
                                        <option  class="empty-option">请选择</option>
                                        <option th:each="level,levelstate:${levels}" th:value="${level.dicValue}" th:text="${level.dicValue}">Choose option</option>
                                      </select>
                                    </div>
                                  </div>
                                  <div class="item form-group">
                                    <label for="content" class="col-form-label col-md-3 col-sm-3 label-align">试题内容</label>
                                    <div class="col-md-7 col-sm-6 ">
                                      <div id="content" class="editor-wrapper placeholderText" contenteditable="true" style="min-height: 120px;"></div>
                                      <textarea id="contents" name="descr"  style="display:none;"></textarea>
                                      <br>

                                    </div>
                                  </div>
                                  <div class="item form-group">
                                    <label for="answer" class="col-form-label col-md-3 col-sm-3 label-align">试题答案</label>
                                    <div class="col-md-7 col-sm-6 ">
                                      <div id="answer" class="editor-wrapper placeholderText" contenteditable="true" style="min-height: 100px;"></div>
                                      <textarea name="descr"  style="display:none;"></textarea>
                                      <br>

                                    </div>
                                  </div>
                                  <div class="item form-group">
                                    <label for="describe" class="col-form-label col-md-3 col-sm-3 label-align">试题解析</label>
                                    <div class="col-md-7 col-sm-6 ">
                                      <div id="describe" class="editor-wrapper placeholderText" contenteditable="true" style="min-height: 120px;"></div>
                                      <textarea name="descr" style="display:none;"></textarea>
                                      <br>

                                    </div>
                                  </div>
                                  <div class="ln_solid"></div>
                                  <div class="item form-group">
                                    <div class="col-md-6 col-sm-6 offset-md-3">
                                      <button id="reset-question" class="btn btn-primary" type="reset">重置表单</button>
                                      <button type="button" class="btn btn-success" id="submit-question">提交</button>
                                    </div>
                                  </div>

                                </form>
                              </div>
                            </div>
                          </div>
                      </div>
                      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <form id="file-form" data-parsley-validate class="form-horizontal form-label-left" onsubmit="return false">

                          <div class="item form-group">
                            <label class="col-form-label col-md-3 col-sm-3 label-align" for="file">上传试题文件 <span class="required"></span>
                            </label>
                            <div class="col-md-6 col-sm-6 ">
                              <input id="file" type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage">
                            </div>
                          </div>

                          <div class="item form-group">
                            <div class="col-md-6 col-sm-6 offset-md-3">
                              <button type="button" class="btn btn-success" id="submit-file">提交</button>
                            </div>
                          </div>
                         </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>
          <div class="clearfix"></div>
        </div>
        <!-- /page content -->

        <!-- footer content -->
        <div th:replace="include/footer::footer">
        <!-- /footer content -->
      </div>
    </div>
    </div>
    <div id="custom_notifications" class="custom-notifications dsp_none">
      <ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
      </ul>
      <div class="clearfix"></div>
      <div id="notif-group" class="tabbed_notifications"></div>
    </div>

    <div th:replace="include/javascript::javascript"></div>
    <!--pagescript-->
    <script>
      $(function () {
        $("#reset-question").on("click",function () {
          $("#content").text(" ");
          $("#answer").text(" ");
          $("#describe").text(" ");
        })
        $("#submit-question").on("click",function () {
          var section=$("#section").find("option:selected").val();
          var type=$("#type").find("option:selected").val();
          var level=$("#level").find("option:selected").val();
          var content=$("#content").text();
          var answer=$("#answer").text();
          var describe=$("#describe").text();
          $.ajax({
            type:"post",
            url:"/question/single_upload",
            data:{section:section,type:type,level:level,content:content,answer:answer,describe:describe},
            dataType:"json",
            success:function (message) {
              if (message.success){
                alert("上传成功");
              }
            }
          });
        });
        $("#submit-file").on("click",function () {
          var file=$("#file")[0].files[0];
          var formData = new FormData();
          formData.append("file",file);
          $.ajax({
            type : "post",
            url : "/question/file_upload",
            data : formData,
            processData : false,
            contentType : false,
            cache:false,
            success : function(message){
              if (message.success){
                alert("上传成功");
              }
            }
          });
      });
      })
    </script>
  </body>
</html>